<template>
	<view class="hospitalcontent">
		<view class="header box d-ai-c">
			<view class="search box d-ai-c">
				<image class="ml-3" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/icon/search.png" mode=""></image>
				<input type="text" v-model="name" value="" placeholder="请输入要搜索的医院名称" placeholder-style="color: #999999;font-size: 28rpx;"/>
			</view>
			<view class="searchbtn ml-2" @tap="search()">
				搜索
			</view>
		</view>
		<view class="bg">
		<scroll-view scroll-y="true" @scrolltolower='nextPage()' :style="{height:height+'px'}">
			<view class="mt-2" v-if="!isNull">
				<view class="doc-list box" v-for="(item,index) in gethospitallist" @tap="Jumpopc(item.name,item.id)">
					<image :src="item.image" mode=""></image>
					<view class="list-right ml-2">
						<view class="box d-ai-c">
							<view>{{item.name}}</view>
						</view>
						<view class="mt-1 adress" >
							地址：{{item.address2}}
						</view>
						<view class="mt-1 box d-ai-c">
							{{item.distanceUm/1000}}km
							<!-- <view class="public" v-if="item.nature==1">公立医院</view>
							<view class="public" v-if="item.nature==2">民营医院</view>
							<view class="private ml-1" v-if="item.grade!=0">三级甲等</view> -->
						</view>
					</view>
				</view>
				
			</view>
			<view v-if="isNull" class="order_null">
				<image src="../../static/kongsousuo@2x.png"></image>
				<text>搜索不到，换一个试试~</text>
				<!-- <button class="btn-shop-list">去逛逛</button> -->
			</view>
		</scroll-view>
		</view>
		<wybpopup ref="popup" type='center' :width="620" :height="520" :radius="15">
			<view class="popup-header box d-ai-c">
				<view class="flex-8">
					选择您要预约的服务
				</view>
				<image @tap="close" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/images/index/guanbi@2x (1).png" mode=""></image>
			</view>
			<view class="typelist box d-jc-c d-ai-c" @tap="jumpserver(1)">
				<image src="../../static/mzpb2@2x.png" mode=""></image>
				<view class="ml-1">
					门诊陪伴
				</view>
			</view>
			<view class="typelist box d-jc-c d-ai-c" @tap="jumpserver(2)">
				<image src="../../static/xtmz2@2x.png" mode=""></image>
				<view class="ml-1">
					血透门诊陪伴
				</view>
			</view>
			<view class="typelist box d-jc-c d-ai-c" @tap="jumpserver(3)" v-if="type==2||type==3">
				<image src="../../static/dpy2@2x.png" mode=""></image>
				<view class="ml-1">
					代配药门诊陪伴
				</view>
			</view>
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup  from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		computed: mapState(['loginState', 'userInfo']),
		components: {
		          wybpopup,
		       },
		data() {
			return {
				name:"",
				height:400,
				longitude:'',
				latitude:'',
				gethospitallist:'',
				pageNum:1,
				pageSize:10,
				hospitalid:'',
				type:'',
				hospitalname:'',//医院名称
				isNull:false,
				hasNextPage:false,
				city:''
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(160)
				}
			})
		},
		onLoad(option) {
			this.longitude = option.longitude 
			this.latitude = option.latitude
			this.city = uni.getStorageSync("city")
				this.hospitallist()
			
		},
		methods: {
			search(){
				this.pageNum = 1
				this.hospitallist()
			},
			close(){
				this.$refs.popup.hide()
			},
			jumpserver(type){
				uni.navigateTo({
					url:'outpatientServer?type='+type+'&name='+this.hospitalname+'&id='+this.hospitalid+'&drugtype='+this.type
				})
				this.close()
			},
			Jumpopc(name,id){
				if(this.loginState){
					this.hospitalname = name
					this.hospitalid = id
					uni.navigateTo({
						url:'outpatientServer?name='+this.hospitalname+'&id='+this.hospitalid+'&drugtype='+this.type
					})
				}else{
					uni.navigateTo({
						url:'../mine/author'
					})
				}
				
				
				// this.type = type
				// this.$refs.popup.show()
				// this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor/static/audio/2.mp3')
			},
			nextPage() {
				// let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.gethospitallist({
						longitude:this.longitude,
						latitude:this.latitude,
						name:this.name,
						city:this.city,
						type:4
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.dataMap.list.length; i++) {
								this.gethospitallist.push(res.data.dataMap.list[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
			
						}
					})
				}
			
			},
			hospitallist(){
				this.$api.gethospitallist({
					longitude:this.longitude,
					latitude:this.latitude,
					name:this.name,
					city:this.city,
					type:4
				},this.pageNum,this.pageSize).then((res) => {
					if(res.data.code=200){
						console.log(res.data.dataMap)
						this.gethospitallist = res.data.dataMap.list
						this.hasNextPage = res.data.dataMap.hasNextPage
						this.isNull = this.gethospitallist.length < 1 ? true : false
					}
							
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.order_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.order_null text {
		margin: 0 auto;
		margin-top: 20rpx;
		color: #666666;
		font-size: 28rpx;
	}
	
	.order_null image {
		margin: 0 auto;
		margin-top: 160rpx;
		width: 261rpx;
		height: 256rpx;
	}
	.btn-shop-list {
		background-color: #FF5551;
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
page{
	background: #F2F7FF;
}
.bg{
	background: #F2F7FF;
}
.header{
	width: 690rpx;
	height: 120rpx;
	background-color: #FFFFFF;
	padding: 0 30rpx 0 30rpx;
	.search{
		width: 590rpx;
		height: 80rpx;
		background: #F2F7FF;
		border-radius: 40rpx;
		image{
			width: 30rpx;
			height: 30rpx;
		}
	}
	.searchbtn{
		border-radius:50rpx;
		line-height: 80rpx;
		text-align: center;
		color: #FF8338 ;
	}
}
.doc-list{
		width: 750rpx;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		image{
			width: 140rpx;
			height: 130rpx;
		}
		.list-right{
			.adress{
				width: 530rpx;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
			view:nth-child(1){
				width: 530rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
			}
			view:nth-child(2){
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
			}
			view:nth-child(3){
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				.public{
					width: 120rpx;
					height: 40rpx;
					background: #F2F7FF;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #4CA8FD;
					line-height: 40rpx;
					text-align: center;
				}
				.private{
					text-align: center;
					line-height: 40rpx;
					width: 120rpx;
					height: 40rpx;
					background: #FFECE0;
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FF8338;
				}
			}
		}
	}
	.popup-header{
		height: 100rpx;
		padding: 0 30rpx 0 30rpx;
		view{
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		image{
			width: 48rpx;
			height: 48rpx;
		}
	}
		.typelist{
			width: 360rpx;
			height: 80rpx;
			background: #FFECE0;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			view{
				font-size: 28rpx;
				font-weight: bold;
				color: #FF8338;
			}
		}
</style>
